<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=yes" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/map.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>车位</title>
</head>

<body>
    <div class="maxLayer">
        <div id="container"></div>
        <div class="info">
            <div class="input-item">
                <div class="input-item-prepend">
                    <span class="input-item-text" style="width:8rem;">请输入目的地</span>
                </div>
                <input id='tipinput' type="text">
            </div>
        </div>
        <div class="input-card">
            <div class="input-item">
                <div class="input-item-prepend"><span class="input-item-text">附近停车场</span></div>
                <select id='province' style="width:100px" onchange='search(this)'></select>
            </div>
        </div>
        <div class="tabbar">
            <a href="index.html" class="tabitem">
        车生活
    </a>
            <a href="javascript:;" class="tabitem tabitem_on">
        找车位
    </a>
            <a href="my.html" class="tabitem ">
        我的
    </a>
        </div>
    </div>


    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript">
        // 创建地图实例
        var map = new AMap.Map("container", {
            zoom: 13,
            center: [104.055304, 30.675367],
            resizeEnable: true
        });

        // 以 icon URL 的形式创建一个途经点
        var viaMarker = new AMap.Marker({
            position: new AMap.LngLat(104.055304, 30.675367),
            // 将一张图片的地址设置为 icon
            icon: 'image/p.png',
            // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30)
        });

        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(32, 32),
            // 图标的取图地址
            image: 'image/p.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(32, 32),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
        });
        // 将 icon 传入 marker
        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(104.066874, 30.673069),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });

        // 创建一个 Icon
        var parking = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(32, 32),
            // 图标的取图地址
            image: 'image/p.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(32, 32),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
        });
        // 将 icon 传入 marker
        var parkingLot = new AMap.Marker({
            position: new AMap.LngLat(104.061484, 30.662259),
            icon: parking,
            offset: new AMap.Pixel(-13, -30)
        });

        // 创建一个 Icon
        var blue = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(32, 32),
            // 图标的取图地址
            image: 'image/p.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(32, 32),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
        });
        // 将 icon 传入 marker
        var blueSheep = new AMap.Marker({
            position: new AMap.LngLat(104.071258, 30.652069),
            icon: blue,
            offset: new AMap.Pixel(-13, -30)
        });

        // 将 markers 添加到地图
        map.add([viaMarker, startMarker, parkingLot, blueSheep]);
    </script>
</body>

</html>